如何写校验函数

前言

在项目中经常会用到表单的校验，前端校验会减少对服务器的压力并且能提升用户体验，达到各种交互效果

练习: 通用校验函数编写

思考: 一般校验有哪几种情况

1. 从上至下,提示语只有一个位置只显示错误的第一条(标红/不标红错误的相关项)

2. 每个元素下方提示当前元素的错误提示 不适合以弹框的形式显示

3. 提示语在元素右侧 弹框安全高度640px以内

程序具体交互?首先得看产品的需求

1. 从上至下校验,只提示按顺序错误的第一个错误信息,失去焦点/值改变立马校验(前提是已经点击过提交按钮了),标红/不标红相应错误的元素

2. 同上,只是错误提示以toast形式显示

3. 校验通过再激活提交按钮,某些还要禁止重复访问(用定时器设置禁止时间长度) 这种适合校验内容少且校验规则是大家普遍有共识的

一、从上至下校验

二、对应校验

思路

思路：表驱动法

1. 设计校验提示信息表 校验规则表 校验元素表（表的健值对必须要一致，方便通过相同的健获取对应表值）

2. 校验执行的顺序，是否中断校验的标志，校验函数返回值

3. 向外暴露错误回调函数

// 主函数设计：validate(obj, fields, format, callback)
// 说明：
// 1.obj 要校验的元素对象
let obj = {
    'email':'',
    'password': ''
};
// 2.fields要校验的格式type和错误提示信息errMsg
let fields = {
    'email': {
        'type': 'emailFormat',
        'errMsg': '邮箱格式错误'
    },
    'password': {
        'type': 'passwordFormat',
        'errMsg': '密码格式错误'
    }
};
// 3.format校验的格式对应的函数
let format = {
    'emailFormat': isEmail,
    'passwordFormat': isPassword,
    'emptyFormat': isEmpty
};
// 4.错误回调
const callback = (errMsg, key) => {
    console.log(errMsg, key);
};
// 5.执行顺序 函数返回值已经中断标志
// isBreak是否中断当前某个元素的校验
// result 格式校验的结果 true标示校验正确
// isSuccess 校验主函数的返回值 true表示校验成功
// callback 校验失败要执行的操作
// 一、从上至下校验
map(() => {
    if (isBreak) {
        return false
    }
})
if (result) {
    // 校验成功
} else {
    // 校验失败
    callback(errMsg, key);
    isBreak = true; // 只要有一个校验出错函数就返回校验失败
    isSuccess = false; 
 
}
// 二、对应校验
// 去掉判断是否中断当前校验即可

代码

// 校验函数
const isEmpty = function (str) {
    return str === null || typeof str === "undefined" || str.replace(/^\s+|\s+$/g, '') ? true : false
};
const isEmail = function (str) {
    return pattern.email.test(str)
};
const isPassword = function (str) {
    return pattern.password.test(str)
};
// 错误回调
const callback = (errMsg, key) => {
    console.log(errMsg, key);
};
// 主函数
const validate = (obj, fields, format, callback) => {
    let isSuccess = true;
    let isBreak = false; // 是否中断校验的标志
    // obj要校验的对象,fields校验提示信息,format校验的格式,callback校验错误的回调函数
    // 函数返回值
    // 通过健一致来获取需要的对应的值
    Object.keys(obj).map((key) => {
        // 检测是否中断map循环
        if (isBreak) {
            return false
        }
        let formats = fields[key]['type']; // 获取校验的格式
        let errMsg = fields[key]['errMsg']; // 获取校验的错误提示语
        let validateFun = format[formats]; // 获取校验格式的函数
        let value = obj[key]; // 要校验对象的值
        let result = validateFun(value); // 执行校验函数,传参数(要校验对象的值) 返回true为校验当前校验通过
        if (result) {
            // 校验成功
            console.log('校验成功')
        } else {
            // 校验失败
            callback(errMsg, key);
            isSuccess = false; // 只要有一个校验出错函数就返回校验失败
            isBreak = true;
            console.log('只要有一个错误就退出当前校验');
        }
    });
    return isSuccess; // 只要有一个错误校验就不通过
};
// 用法 对应校验需要配合ui一起使用 callback(errMsg, key) key为校验的元素错误信息ui应与其相关联是否显示
// 1.obj 要校验的元素对象
let obj = {
    'email':'',
    'password': ''
};
// 2.fields要校验的格式type和错误提示信息errMsg
let fields = {
    'email': {
        'type': 'emailFormat',
        'errMsg': '邮箱格式错误'
    },
    'password': {
        'type': 'passwordFormat',
        'errMsg': '密码格式错误'
    }
};
// 3.format校验的格式对应的函数
let format = {
    'emailFormat': isEmail,
    'passwordFormat': isPassword,
    'emptyFormat': isEmpty
};
// 4.调用
console.log(validate(obj, fields, format, callback));